import { useGameStore } from '../../store/gameStore';
import { SpaceType } from '../../types';

export default function Board() {
  const game = useGameStore(state => state.game);

  if (!game) return null;

  return (
    <div className="bg-white rounded-lg shadow-lg p-6">
      <div className="grid grid-cols-11 gap-1 aspect-square">
        {/* 简化的棋盘显示 - 只显示关键位置 */}
        {game.board.map((space, index) => {
          const playersHere = game.players.filter(p => p.position === index && !p.isBankrupt);
          const isCorner = [0, 10, 20, 30].includes(index);

          return (
            <div
              key={index}
              className={`
                relative border border-gray-300 rounded flex flex-col items-center justify-center text-xs
                ${isCorner ? 'col-span-1 row-span-1 bg-yellow-100' : ''}
                ${space.type === SpaceType.PROPERTY ? 'bg-blue-50' : ''}
                ${space.type === SpaceType.CHANCE ? 'bg-orange-50' : ''}
                ${space.type === SpaceType.COMMUNITY ? 'bg-green-50' : ''}
                ${space.type === SpaceType.TAX ? 'bg-red-50' : ''}
              `}
            >
              <div className="text-center p-1">
                <div className="font-bold">{index}</div>
                {space.property && (
                  <div className="text-xs truncate">{space.property.name}</div>
                )}
              </div>

              {/* 显示玩家 */}
              {playersHere.length > 0 && (
                <div className="absolute bottom-0 left-0 right-0 flex justify-center gap-1 p-1">
                  {playersHere.map(player => (
                    <span key={player.id} className="text-lg">
                      {player.character.avatar}
                    </span>
                  ))}
                </div>
              )}

              {/* 显示地块所有者 */}
              {space.property?.owner && (
                <div className="absolute top-0 right-0 w-2 h-2 rounded-full bg-purple-500" />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
